<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>图片弹出框</title>

    <link rel="stylesheet" href="./css/concise.css">
</head>
<body>
<input type="checkbox" id="left-information">
<div id="wrapper">
    <div id="bgg"></div>
    <header id="header">
        <nav id="nav" class="clearfix">
            <label for="left-information"></label>
            <ul class='nav-left'>
                <li><a href="/">navgation</a></li>
            </ul>
        </nav>
    </header>
    <article id="logo">
        <div id="logo-content">
            <header>
                <a href="">图片弹出框<b>插件</b></a>
            </header>
            <p>点击下面的图片来弹出预览</p>
        </div>
    </article>
    <div id="main" class="clearfix">
        <section id="main-left" class="left" style="width:100%;">
            <article id="post">
                <div id="page-post-content" style="text-align:center;">
                    <img style="margin-bottom:5px;" src="http://ooa3lxrpg.bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20170417212627.png" alt="Alt text"><br>图片1<br><br>
                    <img style="margin-bottom:5px;" src="http://ooa3lxrpg.bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20170417212833.png" alt="Alt text"><br>图片2<br><br>
                    <img style="margin-bottom:5px;" src="http://ooa3lxrpg.bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20170417214638.png" alt="Alt text"><br>图片3<br><br>
                    <img style="margin-bottom:5px;" src="http://ooa3lxrpg.bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20170417214722.jpg" alt="Alt text"><br>图片4<br><br>
                    <img style="margin-bottom:5px;" src="http://ooa3lxrpg.bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20170417215217.png" alt="Alt text">图片5<br>
                </div>
            </article>



        </section>
    </div>
</div>
</body>
<script src="./js/concise.js"></script>
</html>